import React, {Component} from "react";
import RecommendItem from "./RecommendItem";
import {RecommendContainer, RecommendItemContainer, RecommendTitle} from "./style";
import {Conversion} from "@/common/header/style";
import {getHomeCompany} from "@/api/JustGameCompany";
import NoDataWindow from "@/common/window/NoDataWindow";

class RecommendList extends Component {
    constructor(props) {
        super(props);
        this.RecommendListClickConversion = this.RecommendListClickConversion.bind(this);
        this.state = {
            companyList: []
        }
    }

    componentDidMount() {
        getHomeCompany().then(res => {
            this.setState({
                companyList: res.data
            })
        })
    }

    RecommendListClickConversion() {
        let DOM = document.getElementById('Switch');
        let origin = DOM.style.transform.replace(/[^0-9]/ig, '');
        if (origin) {
            origin = parseInt(origin, 10);
        } else {
            origin = 0;
        }
        DOM.style.transform = 'rotate( ' + (origin + 360) + 'deg )';
    }

    render() {
        return (
            <RecommendContainer>
                <RecommendTitle>
                    热门厂商
                    <Conversion onClick={this.RecommendListClickConversion}>
                        <span style={{float: 'right'}}>换一批</span>
                        <i id="Switch" className='iconfont spin'>&#xe629;</i>
                    </Conversion>
                </RecommendTitle>
                <RecommendItemContainer>
                    {
                        this.state.companyList ? this.state.companyList.length !== 0 ?
                            this.state.companyList.map(item => {
                                return <RecommendItem
                                    key={item.name}
                                    imageUrl={item.imageUrl}
                                    name={item.name}
                                    gameCount={item.gameCount}
                                />
                            })
                            :
                            <NoDataWindow/>
                            :
                            <NoDataWindow/>
                    }
                </RecommendItemContainer>
            </RecommendContainer>
        )
    }

}

export default RecommendList;
